<template>
	<view class="message">
		<view class="tabs flex-between">
			<view class="flex-center" :class="{active:tabIndex == 0}" @click="changeTab(0)">系统通知</view>
			<view class="flex-center" :class="{active:tabIndex == 1}" @click="changeTab(1)">粉丝</view>
			<view class="flex-center" :class="{active:tabIndex == 2}" @click="changeTab(2)">点赞</view>
			<view class="flex-center" :class="{active:tabIndex == 3}" @click="changeTab(3)">评论</view>
		</view>
		<view class="list-box" v-if="true">
			<block v-for="(item,index) in 10" :key="index">
				<navigator :url="'/pages/index/msgDetail?id='+ index" class="list flex-between">
					<view class="left flex">
						<view class="img flex-center">
							<image src="/static/ling.png" mode="widthFix"></image>
						</view>
						<view class="info">
							<view class="name">跟随金刚葫芦娃漏单</view>
							<view class="p">查看详情</view>
						</view>
					</view>
					<view class="p">04-21 20:20</view>
				</navigator>
			</block>
		</view>
		
		<!-- 无数据 -->
		<empty title="暂无消息记录" desc='当有消息内容后会在这里显示' v-else></empty>
		
	</view>
</template>

<script>
	import Empty from '@/components/empty.vue'
	export default {
		components:{
			Empty
		},
		data() {
			return {
				tabIndex:0,
			};
		},
		methods:{
			changeTab(i){
				this.tabIndex = i;
			}
		},
		onNavigationBarButtonTap() {
			uni.showToast({
				title:'全部已读',
				icon:'none'
			})
		}
	}
</script>

<style lang="less">
	@color:#d4237a;
	.message{
		// padding-top: 90rpx;
		.tabs{
			background: white;
			// position: fixed;
			// top: 0;
			width: 100vw;
			view{
				width: 25%;
				font-size: 30rpx;
				font-weight: bold;
				color:#666;
				line-height: 2;
				padding-bottom: 10rpx;
				&.active{
					color:#000;
					position: relative;
					&::after{
						content:"";
						display: block;
						width: 30rpx;
						height: 4rpx;
						position: absolute;
						bottom:5rpx;
						left:calc(50% - 15rpx);
						background:@color ;
					}
				}
			}
			
		}
		.list-box{
			padding: 0 30rpx;
			background: white;
			.list{
				padding: 24rpx 0;
				border-bottom: 1px solid #eee;
				.img{
					width: 120rpx;
					height: 120rpx;
					background: #4f68b0;
					border-radius: 50%;
					margin-right: 20rpx;
					image{
						width: 80rpx;
						height: auto;
					}
				}
				.name{
					font-size: 30rpx;
					margin-bottom: 18rpx;
					width: 360rpx;
					overflow:hidden;
					text-overflow:ellipsis;
					white-space:nowrap
				}
				.p{
					font-size: 26rpx;
					color:#999;
				}
			}
		}
		
		
	}
</style>
